import { reactive, ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { getSidebarStatus, setSidebarStatus } from '@/utils/cache/local-storage';
import { DeviceEnum, SIDEBAR_OPENED, SIDEBAR_CLOSED } from '@/constants/app-key';

interface Sidebar {
	opened: boolean;
	withoutAnimation: boolean;
}

/** 设置侧边栏状态本地缓存 */
function handleSidebarStatus(opened: boolean) {
	opened ? setSidebarStatus(SIDEBAR_OPENED) : setSidebarStatus(SIDEBAR_CLOSED);
}

export const useAppStore = defineStore('app', () => {
	/** 侧边栏状态 */
	const sidebar: Sidebar = reactive({
		opened: getSidebarStatus() !== SIDEBAR_CLOSED,
		withoutAnimation: false,
	});
	/** 设备类型 */
	const device = ref<DeviceEnum>(DeviceEnum.Desktop);

	/** 监听侧边栏 opened 状态 */
	watch(
		() => sidebar.opened,
		(opened) => handleSidebarStatus(opened)
	);

	/** 切换侧边栏 */
	const toggleSidebar = (withoutAnimation: boolean) => {
		sidebar.opened = !sidebar.opened;
		sidebar.withoutAnimation = withoutAnimation;
	};
	/** 关闭侧边栏 */
	const closeSidebar = (withoutAnimation: boolean) => {
		sidebar.opened = false;
		sidebar.withoutAnimation = withoutAnimation;
	};
	/** 切换设备类型 */
	const toggleDevice = (value: DeviceEnum) => {
		device.value = value;
	};

	return { device, sidebar, toggleSidebar, closeSidebar, toggleDevice };
});
